<template>
  <div class="userinfo_content">
    <!-- 账户信息 -->

    <el-form
      ref="formData"
      v-loading="formLoading"
      class="base-pipeline-layout"
      :rules="formRules"
      :model="formData"
      label-width="100px"
    >
      <div class="title-info">
        <span class="info-left"></span>
        <div class="info-center">{{ dataList.AccountInformation }}</div>
        <span class="info-right"></span>
      </div>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="dataList.username" prop="account">
            <el-input
              v-model="formData.account"
              disabled
              :placeholder="dataList.Enterusername"
              style="width: 345px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="dataList.Name" prop="name">
            <el-input
              v-model="formData.name"
              :placeholder="dataList.EnterName"
              style="width: 345px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="dataList.password" prop="password">
            <el-button type="info" @click="EditPassword">{{ dataList.ChangePassword }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title-info">
        <span class="info-left"></span>
        <div class="info-center">{{ dataList.BasicInformation }}</div>
        <span class="info-right"></span>
      </div>

      <el-row>
        <el-col :span="23">
          <el-form-item :label="dataList.mobile" prop="mobile">
            <el-input
              v-model="formData.mobile"
              :placeholder="dataList.Entermobile"
              style="width: 345px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="Email" prop="mail">
            <el-input
              v-model="formData.mail"
              :placeholder="dataList.Entermail"
              style="width: 345px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="23" style="display: flex">
          <el-form-item
            :label="dataList.headPortrait"
            prop="icon"
            class="avatar"
            style="width: 230px"
          >
            <BaseUpload
              key="BaseUpload"
              ref="BaseUpload"
              v-model="formData.icon"
              business-type="10"
              :file-size="1024"
            />
          </el-form-item>
          <el-form-item
            :label="dataList.signature"
            prop="accountSignIcon"
            class="avatar"
            style="width: 230px"
          >
            <BaseUpload
              key="BaseUploadAccountSignIcon"
              ref="BaseUploadAccountSignIcon"
              v-model="formData.accountSignIcon"
              business-type="11"
              :file-size="1024"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="submit-footer">
      <el-button v-loading="submitLoad" type="primary" @click="submitForm"
        >{{ btn.Save }}</el-button
      >
      <!-- <el-button @click="handleClose">取 消</el-button> -->
    </span>

    <!--新增/编辑用户-->
    <PasswordDialog
      v-model="isShowPasswordDialog"
      @success="PassWordDialogCall"
    />
  </div>
</template>

<script>
import {
  userDetail,
  UpdateBasics,
} from "../../../api/Permission/PermissionUser.js";
import PasswordDialog from "./PasswordDialog";
export default {
  name: "PermissionUserInfo",
  components: {
    PasswordDialog,
  },
  data() {
    return {
      formData: {
        // 账户信息
        account: "",
        password: "",
        name: "",
        mobile: "",
        mail: "",
        salt: "",
        icon: "",
        accountSignIcon: "",
        userStatus: 1,
      },
      userId: "",
      formLoading: true, //    loading状态
      isShowPasswordDialog: false,
      submitLoad: false, // 提交loading
      readOnly: true, // 是否只读
      formRules: {
        account: [{ required: true, message: this.$t("Permission.PermissionUser.Enterusername") }],
        name: [{ required: true, message: this.$t("Permission.PermissionUser.EnterName") }],
      }, // 验证规则
      originUserData: {},
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.userId = this.$store.getters.currentUserId;
      // 获取用户信息
      userDetail({ id: this.userId })
        .then((res) => {
          this.formLoading = false;
          const data = res.data;
          this.originUserData = res.data;
          this.formData = {
            // 账户信息
            account: data.account,
            password: data.password,
            name: data.name,
            mobile: data.mobile,
            mail: data.mail,
            // 基本信息
            // icon: `${this.$baseProtocol}//${res.data.fileDomain}/${res.data.fileBucket}/${res.data.icon}`,
            // accountSignIcon: `${this.$baseProtocol}//${res.data.fileDomain}/${res.data.fileBucket}/${res.data.accountSignIcon}`,
            icon: `${res.data.icon}`,
            accountSignIcon: `${res.data.accountSignIcon}`,
            userStatus: data.userStatus === 1 ? "1" : "0",
          };
        })
        .catch(() => {
          this.formLoading = false;
        });
    },

    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      this.formLoading = false;
      // this.$message.success("操作成功");
      this.$emit("success");
      this.handleClose();
    },
    // 提交表单
    submitForm() {
      // 校验表单必填项
      var _this = this;
      _this.formLoading = true;
      _this.$refs.formData.validate((valid) => {
        if (valid) {
          // 当前编辑ID是否存在 存在则去更新用户信息
          var tmpFormData = this.Helper.simpleDeepCopy(this.formData);
          tmpFormData["icon"] = _this.$refs.BaseUpload.filePath
            ? _this.$refs.BaseUpload.filePath
            : _this.originUserData.icon;
          tmpFormData["accountSignIcon"] = _this.$refs.BaseUploadAccountSignIcon
            .filePath
            ? _this.$refs.BaseUploadAccountSignIcon.filePath
            : _this.originUserData.accountSignIcon;

          const requestData = JSON.parse(JSON.stringify(tmpFormData));
          this.editAPI(requestData);
        } else {
          this.$message.error(this.$t("Permission.PermissionUser.PleaseComplete"));
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
    },
    // 编辑接口
    editAPI(data) {
      var _this = this;
      UpdateBasics({
        ...data,
        id: _this.userId,
      })
        .then((res) => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 修改密码
    EditPassword() {
      this.isShowPasswordDialog = true;
    },
    // 修改密码成功回调
    PassWordDialogCall() {
      this.isShowPasswordDialog = false;
    },
  },
};
</script>

<style scoped lang="scss">
// 添加滚动条
.userinfo_content {
  height: 100%;
  overflow-y: auto;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px 4px #e4e7f0;
}

// 账户信息基本信息样式
.title-info {
  width: 100%;
  margin: 60px 40px 30px;
}
.title-info {
  display: flex;
  align-items: center;
  & > .info-left {
    width: 3px;
    height: 14px;
    border-radius: 1px;
    background-color: blue;
  }

  & > .info-center {
    font-size: 14px;
    line-height: 14px;
    margin: 0 5px;
  }

  & > .info-right {
    height: 2px;
    background-color: #eee;
    flex: 1;
  }
}
// 提交
.submit-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  .el-button {
    width: 70px;
    &:last-child {
      margin-left: 80px;
    }
  }
}
</style>
